HighContrast: Fix undershoot in sidebars

This was just not implemented, and the sidebars solid white
background color was inherited by undershoot rectangle.

https://bugzilla.gnome.org/show_bug.cgi?id=753391

diff --git a/gtk/theme/HighContrast/_common.scss b/gtk/theme/HighContrast/_common.scss
index ef3c22d39d24a708859e4c16f3c10cf0acd373c2..48e95cd6eed6715d6273df6ffcc81d33adc148e1 100644 (file)
--- a/gtk/theme/HighContrast/_common.scss
+++ b/gtk/theme/HighContrast/_common.scss
@@ -2601,3 +2601,22 @@ GtkColorSwatch {
   }
 }
 
+// Overflow indication, works similarly to the overshoot, the size if fixed tho.
+.undershoot {
+  &.top {
+    @include undershoot(top);
+  }
+
+  &.bottom {
+    @include undershoot(bottom);
+  }
+
+  &.left {
+    @include undershoot(left);
+  }
+
+  &.right {
+    @include undershoot(right);
+  }
+}
+

diff --git a/gtk/theme/HighContrast/_drawing.scss b/gtk/theme/HighContrast/_drawing.scss
index 4cb8b29d6d55629f32acf12d53bebcb92a0b76c1..e80d1b1888160ab34a34161dcf049bb6412d6ec2 100644 (file)
--- a/gtk/theme/HighContrast/_drawing.scss
+++ b/gtk/theme/HighContrast/_drawing.scss
@@ -337,3 +337,42 @@
   border: none;                  //
   box-shadow: none;              //
 }
+
+@mixin undershoot($p) {
+//
+// undershoot
+//
+// $p: position
+//
+// possible $p values:
+// top, bottom, right, left
+//
+
+  $_undershoot_color_dark: transparentize(black, 0.8);
+  $_undershoot_color_light: transparentize(white, 0.8);
+
+  $_gradient_dir: left;
+  $_dash_bg_size: 10px 1px;
+  $_gradient_repeat: repeat-x;
+  $_bg_pos: center $p;
+
+  background-color: transparent; // shouldn't be needed, but better to be sure;
+
+  @if ($p == left) or ($p == right) {
+    $_gradient_dir: top;
+    $_dash_bg_size: 1px 10px;
+    $_gradient_repeat: repeat-y;
+    $_bg_pos: $p center;
+  }
+
+  background-image: linear-gradient(to $_gradient_dir, // this is the dashed line
+                                    $_undershoot_color_light 50%,
+                                    $_undershoot_color_dark 50%);
+
+  padding-#{$p}: 1px;
+  background-size: $_dash_bg_size;
+  background-repeat: $_gradient_repeat;
+  background-origin: content-box;
+  background-position: $_bg_pos;
+}
+

diff --git a/gtk/theme/HighContrast/gtk.css b/gtk/theme/HighContrast/gtk.css
index 559205d70c9fe8bebd4e69d702b7caa203c3d084..3c203b9d0eb7720250ac93e14773a6ba2adde09f 100644 (file)
--- a/gtk/theme/HighContrast/gtk.css
+++ b/gtk/theme/HighContrast/gtk.css
@@ -2959,3 +2959,36 @@ GtkColorSwatch {
   .touch-selection .radio:backdrop:checked {
     icon-shadow: none;
     color: #fff; }
+
+.undershoot.top {
+  background-color: transparent;
+  background-image: linear-gradient(to left, rgba(255, 255, 255, 0.2) 50%, rgba(0, 0, 0, 0.2) 50%);
+  padding-top: 1px;
+  background-size: 10px 1px;
+  background-repeat: repeat-x;
+  background-origin: content-box;
+  background-position: center top; }
+.undershoot.bottom {
+  background-color: transparent;
+  background-image: linear-gradient(to left, rgba(255, 255, 255, 0.2) 50%, rgba(0, 0, 0, 0.2) 50%);
+  padding-bottom: 1px;
+  background-size: 10px 1px;
+  background-repeat: repeat-x;
+  background-origin: content-box;
+  background-position: center bottom; }
+.undershoot.left {
+  background-color: transparent;
+  background-image: linear-gradient(to top, rgba(255, 255, 255, 0.2) 50%, rgba(0, 0, 0, 0.2) 50%);
+  padding-left: 1px;
+  background-size: 1px 10px;
+  background-repeat: repeat-y;
+  background-origin: content-box;
+  background-position: left center; }
+.undershoot.right {
+  background-color: transparent;
+  background-image: linear-gradient(to top, rgba(255, 255, 255, 0.2) 50%, rgba(0, 0, 0, 0.2) 50%);
+  padding-right: 1px;
+  background-size: 1px 10px;
+  background-repeat: repeat-y;
+  background-origin: content-box;
+  background-position: right center; }